import './comments.scss'

import React, { useEffect, useState } from 'react'

import { Popconfirm, Pagination, Empty } from 'antd'

import dayjs from '../../utils/day'

// import { GetComments } from '../../api/comment'

import avatar from '../../assets/img/avatar.png'

interface IProps {
  userinfo: any
  current: any
  pagesize: any
  total: any
  comments: Array<any>
  replyTo: Function
  changePagination: Function
  changePageSize: Function
  deleteComment: Function
  // thumbComment: Function
}

export default function Comments(props: IProps) {
  // const [moreLoding, setMoreLoding] = useState(false)
  // const [comments, setComments] = useState<Array<any>>([]) // 留言列表
  // const [userinfo, setUserinfo] = useState({}) // 用户信息

  useEffect(() => {}, [])

  // 回复评论
  const replyTo = (comm: any, _id: string | undefined) => {
    let scrollY = document.documentElement.scrollTop
    props.replyTo(comm, _id, scrollY)
  }

  // 点赞评论
  // thumbComment = (
  //   comm: Comment,
  //   _id: string | undefined,
  //   like_status: number | undefined
  // ) => {
  //   if (this.props.userinfo.isLogin) {
  //     this.props.thumbComment(comm, _id, like_status)
  //   } else {
  //     message.warn('请您先登录哦~', 3)
  //   }
  // }

  // 删除评论
  const deleteComment = (commId: string, mainCommId?: string) => {
    props.deleteComment(commId, mainCommId)
  }

  // 分页
  const changePagination = (page: number, pageSize?: number | undefined) => {
    props.changePagination(page, pageSize)
  }

  // const changePageSize = (current: number, pageSize: number) => {
  //   props.changePageSize(current, pageSize)
  // }

  const { userinfo } = props
  const { _id } = userinfo

  // 操作栏
  const extra = (comment: any, fId: string | undefined) => {
    const extra = [
      <span key="thumb" className="icon thumb">
        <i className="iconfont iconthumbs-up"></i>
        <span className="number">{comment.like_number}</span>
      </span>,
      <span key="reply" className="icon reply">
        <i className="iconfont iconcomment"></i>
        <span className="number">
          {fId === comment._id ? comment.children.length : 0}
        </span>
      </span>,
    ]

    let del = (
      <Popconfirm
        key="popconfirm"
        title="是否要删除此条留言?"
        okText="确定"
        onConfirm={() => deleteComment(comment._id, fId)}
        cancelText="取消"
      >
        <span className="icon del">
          <i className="iconfont iconshanchu"></i>
        </span>
      </Popconfirm>
    )

    // 如果登录用户 === 当前评论用户 则开启删除功能
    _id === comment.userinfo._id ? extra.push(del) : null

    return extra
  }

  // 悄悄话

  const secret = (comment: any) => {
    const { userinfo, secret, at } = comment

    let inner: any = null

    // 是否为隐藏评论
    if (!secret) {
      inner = <p>{comment.content}</p> // 显示内容
    } else {
      inner = <p className="secret">这是一条悄悄话哦，仅评论双方可见</p> // 显示遮挡
    }

    if (_id && _id === userinfo._id) {
      inner = (
        <p>
          <a href="javascript:void(0)" className="at">
            {at}
          </a>
          , {comment.content}
        </p>
      )
    }

    // 如果当前用户等于此评论用户 或者用户为博主 显示此评论
    return inner
  }

  // 评论渲染器
  const MainRender = (comments: Array<any>, fId?: string) => {
    // 如果不是数组则表示没有子评论
    if (!Array.isArray(comments)) return null

    // 返回评论模板
    return comments.map((comment, index) => {
      if (!fId) {
        // 子评论
        fId = comment._id
      }

      // 评论时间
      const CommentDate = comment.createdAt
        ? dayjs(comment.createdAt).fromNow()
        : null

      // 用户评论客户端
      const agent = (client: any) => (
        <div className="agent">
          <div className="system">
            {/* <span> 来自 </span> */}
            <span> {client.os.name}</span>
            <span> {client.os.version}</span>
          </div>
          <span className="dot"> · </span>
          <div className="browser">
            <span> {client.browser.name}</span>
            <span>浏览器</span>
          </div>
        </div>
      )

      // 博主标签
      const title = <div className="title">博主</div>

      return (
        <section
          key={comment._id}
          data-aos="fade-up"
          data-aos-delay={index * 50}
          data-aos-duration={850}
          className="comment"
        >
          <div className="avatar">
            <img
              src={comment.userinfo.avatar ? comment.userinfo.avatar : avatar}
              width="60px"
            ></img>
          </div>
          <div className="details">
            <div className="head nowrap">
              <h2 className="name">{comment.userinfo.nickname}</h2>
              <div className="date">{CommentDate}</div>
              {comment.userinfo.nickname === 'redloney' ? title : null}
              {/* 回复 */}
              <span className="reply" onClick={() => replyTo(comment, fId)}>
                回复
              </span>
            </div>
            {/* 用户客户端信息 */}
            {agent(comment.client_info)}
            {/* <div className="content">{comment.content}</div> */}
            <div className="content">{secret(comment)}</div>
            <div className="extra">{extra(comment, fId)}</div>
            <div className="children">{MainRender(comment.children, fId)}</div>
          </div>
        </section>
      )
    })
  }

  return (
    <div id="comments">
      {
        // 主评论
        props.comments.length ? (
          MainRender(props.comments)
        ) : (
          <Empty
            image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
            imageStyle={{
              height: 60,
            }}
            description={<span>暂无留言</span>}
          ></Empty>
        )
      }
      <Pagination
        data-aos="fade-up"
        data-aos-duration={850}
        current={props.current}
        pageSize={props.pagesize}
        total={props.total}
        // showSizeChanger
        // onShowSizeChange={changePageSize}
        pageSizeOptions={['5', '10', '15', '20', '30']}
        defaultPageSize={5}
        hideOnSinglePage
        defaultCurrent={0}
        showTitle
        onChange={changePagination}
      />
      {/* {loadMore} */}
    </div>
  )
}
